<template>
  <div class="fruits">
      <div class="fruits-left">
        <ul>
          <li v-for="(v,i) in this.$store.state.sort.onearr" :key="i">
            <p><span>{{v.kinds}}</span>{{v.p}}</p>
          </li>
        </ul>
      </div>
      <div class="fruits-rigth">
        <component :is="tem" ></component>
      </div>
  </div>
</template>

<script>
import Da from "com/Sort/twolvyou/donta/da.vue";
import Db from "com/Sort/twolvyou/donta/db.vue";
import Dc from "com/Sort/twolvyou/donta/dc.vue";
export default {
  components:{
    Da,Db,Dc
  },
  mounted(){
    this.$store.dispatch("axiosjta",{url:"http://1.116.51.111:8000/goods/kind1/",data:{kid:1}});
  },
  data(){
    return{
      tem:"Da",
    }
  },
  methods:{
  //   fun(){
  //     this.tem="Da";
  //     this.$store.dispatch("axiosjta",{url:"http://1.116.51.111:8000/goods/kind1/",data:{kid:1}});
  //     console.log("请求");
  //   }
  }
}
</script>

<style scoped>
  .fruits{
    width: 100%;
    height: 7.75rem;
    /* background-color: aqua; */
    display: flex;
    border-radius: 5px 5px 0px 0px;
    overflow: hidden;
  }
  .fruits-left{
    width: 20%;
    height: 100%;
    background-color: rgb(246, 246, 246);
    overflow: auto;
  }
  .fruits-left>ul{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    align-content: flex-start;
  }
  .fruits-left>ul>li{
    width: 100%;
    height: 0.5rem;
    background-color: rgb(246, 246, 246);
    /* display: flex; */
    line-height: 0.5rem;
    text-align: center;
    display: flex;
    justify-content: center;
    white-space: nowrap;
    border-right: 1px solid gainsboro;
  }
  .fruits-rigth{
    width: 80%;
    height: 100%;
    background-color: bisque;
  }
</style>